import Https from "@/utils/Https";
import { ActionType, ProTable } from "@ant-design/pro-components";
import React, {
  useState,
  useRef,
  useImperativeHandle,
  forwardRef,
  useEffect,
} from "react";
import { vipTypeList } from "@/utils/common/index";
import { InputNumber, message } from "antd";
interface propType {
  vipType: number | string;
  rowKeys: number[];
  rowList: any[];
  onSuccess: (keys, list) => void;
}
const CourseChange = forwardRef((props: propType, ref) => {
  const { vipType, onSuccess, rowKeys, rowList } = props;
  const [loading, setLoading] = useState(false);
  //默认选中的课程
  const [selectedRowKeys, setSelectedRowKeys] = useState(rowKeys);
  const [selectedRowsList, setselectedRowsList] = useState(rowList);
  //初始化课程Id和收费信息
  const [couseList, setCouseList] = useState(rowList);
  const actionRef = useRef<ActionType>();
  const [columns, setColumns] = useState([
    {
      title: "场馆名称",
      dataIndex: "venueName",
      width: 150,
    },
    {
      title: "课程类型",
      dataIndex: "courseType",
      valueType: "select",
      width: 100,
      valueEnum: {
        1: { text: "私教课", status: "" },
        2: { text: "团课", status: "" },
        3: { text: "班课", status: "" },
      },
    },
    {
      title: "课程名称",
      dataIndex: "courseName",
      width: 200,
      ellipsis: true,
    },
  ]);
  //获取预约记录列表
  const getList = async (p) => {
    setLoading(true);
    let res = await Https.post("/vip/cards/courseAllList", p, true);
    setLoading(false);
    let obj = [];
    if (res.code == 200 && res.data) {
      if (res.data.length > 0) {
        if (rowList.length > 0) {
          res.data.map((item) => {
            let price = 0;
            let hasPrice = rowList.filter(function (o) {
              return o.courseId == item.courseId;
            });
            if (hasPrice.length > 0) {
              price = hasPrice[0].price;
            }
            obj.push({ ...item, price });
          });
        } else {
          obj = res.data;
        }
      } else {
        obj = [];
      }
    } else {
      message.error(res.msg);
    }
    return {
      success: true,
      data: obj,
    };
  };
  useImperativeHandle(ref, () => ({
    changeVal: () => {
      let list = [];
      if (selectedRowKeys.length == 0) {
        message.error("请选择课程");
      } else {
        selectedRowsList.map((e) => {
          let hasPrice = couseList.filter(function (o) {
            return o.courseId == e.courseId;
          });
          let price = hasPrice.length > 0 ? hasPrice[0].price : 1;
          list.push({ ...e, price });
        });
      }
      onSuccess && onSuccess(selectedRowKeys, list);
    },
  }));
  //设置费用
  const setPrice = (e, t) => {
    let objList = couseList;
    if (objList.length == 0) {
      objList.push({ ...t, price: e });
    } else {
      let hasLabelIndex = objList.findIndex((item) => {
        return item.courseId == t.courseId;
      });
      if (hasLabelIndex > -1) {
        objList[hasLabelIndex].price = e;
      } else {
        objList.push({ ...t, price: e });
      }
    }
    setCouseList(objList);
  };
  useEffect(() => {
    if (vipType != 2) {
      let obj = [...columns];
      obj.push({
        title: "收费价格",
        dataIndex: "price",
        align: "center",
        width: 300,
        hideInSearch: true,
        render: (r, t) => {
          return vipType == 2 ? (
            "-"
          ) : (
            <span>
              单节课收费
              <InputNumber
                min={1}
                precision={vipType == 1 ? 2 : 0}
                placeholder="请输入"
                controls={false}
                defaultValue={t.price}
                onChange={(e) => {
                  let price = e ? e : 1;
                  setPrice(price, t);
                }}
                style={{ margin: "0 10px", width: "150px" }}
              />
              {vipTypeList[vipType].status}/人
            </span>
          );
        },
      });
      setColumns(obj);
    }
  }, [vipType]);

  //获取选中的列
  const rowSelectChange = (selectedRowKeys, selectedRows, info) => {
    setSelectedRowKeys(selectedRowKeys);
    setselectedRowsList(selectedRows);
  };
  return (
    <div key="Course">
      <ProTable
        columns={columns}
        rowKey="courseId"
        actionRef={actionRef}
        loading={loading}
        search={false}
        rowSelection={{
          onChange: rowSelectChange,
          selectedRowKeys,
        }}
        scroll={{ x: 1000 }}
        pagination={{
          showSizeChanger: true,
        }}
        request={async (params) => {
          return await getList(params);
        }}
      />
    </div>
  );
});
export default CourseChange;
